<!--
*@Author: zt
*@Description: 获取出差人员
*@Date: 2024-08-12 
-->
<template>
  <u-dialog
    v-bind="$attrs"
    title="出差人员"
    :confirmLoading="formLoading"
    style="width: 100vw"
    @submit="submit"
    @close="dialogClose"
  >
    <a-layout class="f-h-100">
      <u-collapsed-sider width="260px" :canExpand="false">
        <u-tree
          :treeData="baseSelData.treeData"
          checkable
          :showSearch="false"
          check-strictly
          :fieldNames="{
            title: 'name',
            key: 'keyid',
            children: 'children',
          }"
          v-model:expandedKeys="selectedKeys"
          v-model:checkedKeys="checkedKeys"
          class="u-commit-travel-user-tree"
        ></u-tree>
      </u-collapsed-sider>
      <a-layout-content class="s-bg-white" style="overflow: auto">
        <u-table
          :columns="columns"
          :data="baseSelData.evectionTab"
          :scroll="{ y: 'calc(100vh - 240px)' }"
        ></u-table>
      </a-layout-content>
    </a-layout>
  </u-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, useAttrs, watch, h } from 'vue';
import { _IFormEl, _IExtra } from '@/src/components/common/form/interface';
import { _IColumnProps } from '@/components/common/tableEdit/interface.ts';
import { storeToRefs } from 'pinia';
import { useLoginStore, useBaseStore } from '@/store';
import { getItemByIds } from '@/util/format.ts'
import { Switch, TableColumnProps } from 'ant-design-vue';
import * as travelApi from '@/service/administration/travel';

const checkedKeys = ref();
const selectedKeys = ref();
const attrs = useAttrs();
const showTel = ref<boolean>(false);
const emits = defineEmits(['submit']);

const { userInfo } = storeToRefs(useLoginStore());
const { deptUsers } = storeToRefs(useBaseStore());
const formLoading = ref<boolean>(false);

const baseSelData = reactive({
  treeData: deptUsers.value,
  evectionTab: [],
});
// 初始化表格
let columns: Array<TableColumnProps> = reactive([
  { dataIndex: 'redeptname', title: '所在科室', align: 'center' },
  { dataIndex: 'reusername', title: '姓名', align: 'center' },
  {
    dataIndex: 'isdriver_echo',
    title: '是否驾驶员',
    width: 200,
    align: 'center',
    customRender: ({ record, text }) => {
      return h(Switch, {
        checked: record.isdriver_echo === true,
        onChange: checked => {
          record.isdriver_echo = checked ? true : false;
        },
      });
    },
  },
  {
    dataIndex: 'remove',
    title: '操作',
    width: 100,
    align: 'center',
    customRender: ({ record, text, index }) => {
      return h(
        'div',
        {
          id: `del_${index}`,
          style: { color: '#1890ff', cursor: 'pointer' },
          onClick: function () {
            baseSelData.evectionTab.splice(index, 1);
            selectedKeys.value = selectedKeys.value.filter(
              i => i != record['keyid']
            );
            checkedKeys.value.checked = checkedKeys.value.checked.filter(
              i => i != record['keyid']
            );
          },
        },
        '删除'
      );
    },
  },
]);

// 确认提交
const submit = async () => {
  formLoading.value = false;
  emits('submit', baseSelData.evectionTab);
};

/**
 *@Author: QWP
 *@Description: 格式化树形选择
 *@Date 2024-08-27 15:05
 */
const formatTreeData = (data: any[]) => {
  data.forEach(item => {
    if ((item['children'] || []).length > 0) {
      item.checkable = false;
      formatTreeData(item['children']);
    }
  });
};

// 弹窗关闭
const dialogClose = () => {
  checkedKeys.value = {};
};

// 数据回显
const getHxData = () => {
  const evectionTabItem = getItemByIds(baseSelData.treeData, attrs.checkedKeys);
  checkedKeys.value = attrs.checkedKeys;
  baseSelData.evectionTab = [];
  evectionTabItem.map((e, index) => {
    if (e.name) {
      e.reusername = e.name;
    }
    if (!e.redeptname) {
      e.redeptname = getItemByIds(baseSelData.treeData, [e.fkparentid])[0].name;
    }
    if (e.fkparentid) {
      e.fkdeptid = e.fkparentid;
    }
    if (e.keyid) {
      e.fkuserid = e.keyid;
    }
    if (e.isdriver_echo) {
      e.isdriver = 1;
    } else {
      e.isdriver = 0;
    }
    e.orderno = index;
    if (baseSelData.evectionTab.includes(e)) {
      return;
    }
    baseSelData.evectionTab.push(e);
  });
};

// 获取选中树的人员
const getTreeUsers = (checkedKeys: string[]) => {
  const evectionTabItem = getItemByIds(
    baseSelData.treeData,
    checkedKeys
  );

  baseSelData.evectionTab = evectionTabItem.map((e, index) => {
    e.reusername = e.name ?? '';
    if (!e.redeptname) {
      e.redeptname = getItemByIds(baseSelData.treeData, [
        e.fkparentid,
      ])[0].name;
    }
    e.fkdeptid = e.fkparentid ?? '';
    e.fkuserid = e.keyid ?? '';
    e.isdriver = e.isdriver_echo ? 1 : 0;
    e.orderno = index;
    return e;
  });
}

// 监听树选择数据的变化
watch(
  () => checkedKeys.value,
  (nval) => getTreeUsers(nval ? nval['checked'] : []),
  {
    immediate: true,
    deep: true,
  }
);

watch(
  () => attrs.open,
  async (nval, oval) => {
    if (nval == true) {
      formatTreeData(baseSelData.treeData);
      if (attrs.keyid != '') {
        await getHxData();
        getHxData();
      }
    }
  }
);
</script>

<style lang="scss">
.u-commit-travel-user-tree {
  width: 240px !important;
}
</style>
